<script setup>
import config from '@/components/conf';
import axios from 'axios';
import { getCurrentInstance, ref } from 'vue';
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
const { proxy } = getCurrentInstance();
const time_week_day = ref({hours: 0, minutes: 0, seconds: 0});
const time_week_end = ref({hours: 0, minutes: 0, seconds: 0});

const getSetting = ()=>{
  const url = config.URL;
  const studentid = proxy.$userid;
  
  axios.get(url+'/api/mm/index/qureyAvailableTime?studentid='+studentid).then(p=>{
    var week_day = p.data.data.dailyAvailableTime;
    var week_end = p.data.data.weekendAvailableTime;
    if(week_day>0){
      time_week_day.value.minutes = week_day%60;
      time_week_day.value.hours = (week_day/60).toFixed();
    }
    if(week_end>0){
      time_week_end.value.minutes = week_end%60;
      time_week_end.value.hours = (week_end/60).toFixed();
    }
  });
}

const handleTime = (e)=>{
    console.log(time_week_day.value);
    saveData();
}
const handleTime2 = (e)=>{
    console.log(time_week_end.value);
    saveData();
}

const saveData = ()=>{
  function time2int(o){
    return o.hours*60+o.minutes;
  }
  const url = config.URL;
  const studentid = proxy.$userid;
  var post = {"studentId":"","weekendAvailableTime":0,"dailyAvailableTime":0};
  post.weekendAvailableTime = time2int(time_week_end.value); 
  post.dailyAvailableTime = time2int(time_week_day.value);        
  post.studentId = studentid;
  axios.post(url+'/api/mm/index/setAvailableTime',post).then(p=>{

  });
}

getSetting();
</script>
<template>
  <div class="container">
    <h1 class="mt-3">使用时间管控设置</h1>
    <form>
      <div class="mb-3">
        <label for="week_day" class="form-label">周一 至 周五</label>
        <VueDatePicker v-model="time_week_day" time-picker class="c_ok"  locale="cn" select-text="确定" @update:model-value="handleTime"></VueDatePicker>
        <div id="emailHelp" class="form-text">上学期间手机使用时长限制</div>
           
      </div>
      <div class="mb-3">
        <label for="week_end" class="form-label">周末</label>
        <VueDatePicker v-model="time_week_end" time-picker class="c_ok"  locale="cn" select-text="确定" @update:model-value="handleTime2"></VueDatePicker>
        <div id="emailHelp" class="form-text">周末手机使用时长限制</div>
      </div>
      
    </form>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
